<template>
  <div class="area-statistics">
    <div class="filter-section" style="margin-bottom: 20px">
      <el-select v-model="districtId" placeholder="按片区筛选" clearable style="width: 200px" @change="loadAreaStatistics">
        <el-option v-for="area in districtList" :key="area.id" :label="area.districtName" :value="area.id" />
      </el-select>
    </div>
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="mb-4">
      <el-col :xs="24" :sm="12" :md="12">
        <el-card class="stat-card" :body-style="{ padding: '20px' }">
          <div class="stat-content">
            <div class="stat-icon" :style="{ backgroundColor: color1 + '20', color: color1 }">
              <el-icon>
                <component :is="House" />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ formatValue(statistics?.totalArea, '㎡') }}</div>
              <div class="stat-label">总面积</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="12">
        <el-card class="stat-card" :body-style="{ padding: '20px' }">
          <div class="stat-content">
            <div class="stat-icon" :style="{ backgroundColor: color2 + '20', color: color2 }">
              <el-icon>
                <component :is="OfficeBuilding" />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ formatValue(statistics?.rentedArea, '㎡') }}</div>
              <div class="stat-label">已租赁面积</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="12">
        <el-card class="stat-card" :body-style="{ padding: '20px' }">
          <div class="stat-content">
            <div class="stat-icon" :style="{ backgroundColor: color3 + '20', color: color3 }">
              <el-icon>
                <component :is="Unlock" />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ formatValue(statistics?.notRentedArea, '㎡') }}</div>
              <div class="stat-label">未租赁面积</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="12">
        <el-card class="stat-card" :body-style="{ padding: '20px' }">
          <div class="stat-content">
            <div class="stat-icon" :style="{ backgroundColor: color4 + '20', color: color4 }">
              <el-icon>
                <component :is="PieChart" />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ (statistics.occupancyRate * 100).toFixed(1) }}</div>
              <div class="stat-label">片区出租率</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="12">
        <el-card class="stat-card" :body-style="{ padding: '20px' }">
          <div class="stat-content">
            <div class="stat-icon" :style="{ backgroundColor: color5 + '20', color: color5 }">
              <el-icon>
                <component :is="PieChart" />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ formatValue(statistics?.totalHousing, '栋') }}</div>
              <div class="stat-label">总楼宇数</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="12">
        <el-card class="stat-card" :body-style="{ padding: '20px' }">
          <div class="stat-content">
            <div class="stat-icon" :style="{ backgroundColor: color6 + '20', color: color6 }">
              <el-icon>
                <component :is="TrendCharts" />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ formatValue(statistics?.totalEnterprise, '户') }}</div>
              <div class="stat-label">总入驻企业数</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="12">
        <el-card class="stat-card" :body-style="{ padding: '20px' }">
          <div class="stat-content">
            <div class="stat-icon" :style="{ backgroundColor: color7 + '20', color: color7 }">
              <el-icon>
                <component :is="TrendCharts" />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ formatValue(statistics?.expiringSoonArea, '㎡') }}</div>
              <div class="stat-label">即将到期面积</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="12">
        <el-card class="stat-card" :body-style="{ padding: '20px' }">
          <div class="stat-content">
            <div class="stat-icon" :style="{ backgroundColor: color8 + '20', color: color8 }">
              <el-icon>
                <component :is="TrendCharts" />
              </el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ formatValue(statistics?.expiringSoonEnterprise, '户') }}</div>
              <div class="stat-label">即将到期企业数</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 片区统计表格 -->
    <el-card v-if="false">
      <template #header>
        <div class="card-header">
          <span>各片区详细统计</span>
          <el-button type="primary" @click="loadAreaStatistics" :loading="loading">
            <el-icon><Refresh /></el-icon>
            刷新数据
          </el-button>
        </div>
      </template>

      <el-table :data="areaData" border style="width: 100%" :max-height="tableHeight" v-loading="loading">
        <el-table-column prop="areaName" label="片区名称" min-width="120" fixed />
        <el-table-column prop="totalArea" label="总面积(㎡)" min-width="120" align="right">
          <template #default="scope">
            {{ formatNumber(scope.row.totalArea) }}
          </template>
        </el-table-column>
        <el-table-column prop="rentedArea" label="已租赁面积(㎡)" min-width="120" align="right">
          <template #default="scope">
            {{ formatNumber(scope.row.rentedArea) }}
          </template>
        </el-table-column>
        <el-table-column prop="availableArea" label="未租赁面积(㎡)" min-width="120" align="right">
          <template #default="scope">
            {{ formatNumber(scope.row.availableArea || scope.row.totalArea - scope.row.rentedArea) }}
          </template>
        </el-table-column>
        <el-table-column prop="rentalRate" label="出租率" min-width="100" align="center">
          <template #default="scope">
            <el-progress
              :percentage="scope.row.rentalRate"
              :color="getRentalRateColor(scope.row.rentalRate)"
              :format="(percentage) => `${percentage}%`"
            />
          </template>
        </el-table-column>
        <el-table-column prop="buildingCount" label="楼宇数" min-width="100" align="center" />
        <el-table-column prop="enterpriseCount" label="入驻企业数" min-width="120" align="center" />
        <el-table-column prop="expiringArea" label="即将到期面积(㎡)" min-width="130" align="right">
          <template #default="scope">
            <span :class="{ 'text-warning': scope.row.expiringArea > 0 }">
              {{ formatNumber(scope.row.expiringArea) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="expiringEnterpriseCount" label="即将到期企业数" min-width="130" align="center">
          <template #default="scope">
            <span :class="{ 'text-warning': scope.row.expiringEnterpriseCount > 0 }">
              {{ scope.row.expiringEnterpriseCount }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { getAreaStatistics } from '@/api/tool/gen';
import { House, OfficeBuilding, TrendCharts, Warning, Unlock, PieChart, Calendar, Clock } from '@element-plus/icons-vue';

import { overallStatistics, listDistrict, districtStatistics, housingStatistics, housingList } from '@/api/system/building';

const loading = ref(false);
const areaData = ref([]);

const tableHeight = computed(() => {
  return (document.documentElement.scrollHeight || 800) - 350 + 'px';
});

const statistics = ref({});
const color1 = ref('#6366F1'); // 靛蓝 - 主色调
const color2 = ref('#10B981'); // 翡翠绿 - 成功状态
const color3 = ref('#F59E0B'); // 琥珀黄 - 警告状态
const color4 = ref('#6B7280'); // 中性灰 - 辅助信息
const color5 = ref('#EF4444'); // 玫瑰红 - 危险状态
const color6 = ref('#909399'); // 中性灰 - 辅助信息
const color7 = ref('#409EFF'); // 蓝色 - 链接/按钮
const color8 = ref('#20C997'); // 绿色 - 成功状态

const formatNumber = (value: number) => {
  if (!value && value !== 0) return '0';
  return value.toLocaleString('zh-CN');
};

const formatValue = (value: number, unit: string) => {
  if (!value && value !== 0) return '0' + unit;
  return value.toLocaleString('zh-CN') + unit;
};

const getRentalRateColor = (rate: number) => {
  if (rate >= 90) return '#67C23A';
  if (rate >= 70) return '#e6a23c';
  return '#F56C6C';
};

const districtId = ref('');
const districtList = ref([]);
const loadAreaStatistics = async () => {
  loading.value = true;

  try {
    const response = await districtStatistics({ districtId: districtId.value });
    if (response.code === 200) {
      // statistics.value = { ...statistics.value, ...response.data };
      statistics.value = response.data;
    }
  } catch (error) {}
};
// 加载片区列表
const getDistrictList = async () => {
  try {
    const res = await listDistrict({ pageNum: 1, pageSize: 100 });
    districtList.value = res.rows;
  } catch (error) {
    console.error('获取片区列表失败:', error);
  }
};

onMounted(() => {
  getDistrictList();
  loadAreaStatistics();
});
</script>

<style scoped>
.area-statistics {
  padding: 20px;
}

.stat-card {
  margin-bottom: 20px;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 15px;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text-warning {
  color: #e6a23c;
  font-weight: bold;
}

@media (max-width: 768px) {
  .stat-content {
    flex-direction: column;
    text-align: center;
  }

  .stat-icon {
    margin: 0 auto;
  }
}
</style>
